<template>
	<view class="agency-container">
		<view class="a-top">
			<text class="a-title">今日待办</text>
			<view class="a-motto">
				<text>今日事，今日毕</text>
			</view>
		</view>
		
		<view class="a-list">
			<view class="itme" v-for="(item,key) in agencyList" :key={key}>
				<text class="i-title" :class="{'active':addClass == 1}">
					{{item.title}} 
				</text>
				<view class="i-time">
					<text>{{item.timeStart}}</text>
					<br/>
					<text>{{item.timeEnd}}</text>
				</view>
				<view class="i-btn" ref="" :key={key} @click="barMove(key)">
					<text class="i-btn-off"></text>
				</view>
			</view>
		</view>
		
		<view class="newTask" @click="newTask">
			<text>新建待办</text>
		</view>
	</view>
</template>

<script>
	const agencyList = [
		{
			title:"800米晨跑",
			timeStart:"06:30",
			timeEnd:"07:30",
			class:"i-title",
			flag:1
		},
		{
			title:"800米晨跑",
			timeStart:"06:30",
			timeEnd:"07:30",
			class:"i-title",
			flag:1
		},
		{
			title:"800米晨跑",
			timeStart:"06:30",
			timeEnd:"07:30",
			class:"i-title-end",
			flag:1
		},
		{
			title:"800米晨跑",
			timeStart:"06:30",
			timeEnd:"07:30",
			class:"i-title-end",
			flag:1
		},
		{
			title:"800米晨跑",
			timeStart:"06:30",
			timeEnd:"07:30",
			class:"i-title-end",
			flag:1
		},
	]
	
	export default {
		data() {
			return {
				title: '',
				agencyList:agencyList,
				addClass:'i-title',
			}
		},
		onLoad() {
	
		},
		methods: {
			newTask(){
				uni.navigateTo({
					url: '/pages/agency/newTask/newTask'
				});
			},
			barMove(idx){
				console.log(idx)
				console.log(agencyList[idx])
				
			}
		}
	}

</script>

<style lang="scss" scoped>
	.agency-container{
		width:100%;
		height:100%;
		padding:4%;
	}
	.a-top{
		height:20%;
	}
	.a-title{
		display: block;
		font-size: 28px;
		font-weight: bold;
	}
	.a-motto{
		font-size:14px;
		margin-top:10px;
		height:25px;
		line-height:25px;
	}
	
	.a-list{
		width: 92%;
		left:4%;
		height:70%;
		position:absolute;
		margin-top:20rpx;
		border: 1px solid #BBBBBB;
		border-radius:2%;
		padding-left:20rpx;
		padding-right:20rpx;
	}
	.a-list .itme{
		margin-top:30rpx;
		border-bottom:1px solid #BBBBBB;
		height:80rpx;
		font-size:12px;
		position: relative;
	}
	
	.a-list .itme .i-title{
		display:inline-block;
		font-size:20px;
		font-weight: bold;
		position:absolute;
		left:0;
		bottom:20rpx;
		color:#FF0000;
		// color:#F0ED03;
	}
	.a-list .itme .i-title-start{
		color:#14D707;
	}
	.a-list .itme .i-title-over{
		color:#FF0000;
	}
	.a-list .itme .i-title-finish{
		color:#14D707;
	}
	
	.a-list .itme .i-time{
		display: inline-block;
		position: absolute;
		right:30%;
		bottom:12rpx;
	}
	
	.a-list .itme .i-btn{
		display: inline-block;
		width:100rpx;
		height:50rpx;
		position: absolute;
		right:0;
		bottom:20rpx;
		border-radius:25rpx;
		background: #14D707;
		border:0;
	}
	
	.a-list .itme .i-btn .i-btn-off{
		display: inline-block;
		width:50rpx;
		height:50rpx;
		position: absolute;
		right:0;
		bottom:0;
		border-radius:50%;
		background: white;
		border:0;
	}
	
	.newTask{
		width:92%;
		height:70rpx;
		position: absolute;
		left:4%;
		top:90%;
		text-align: center;
		color:white;
		background-color: #0076FF;
		font-size:14px;
		letter-spacing: 5rpx;
		line-height:70rpx;
		border-radius:10rpx;
	}
</style>
